<!DOCTYPE html>
<html>
<head>
  <#import "spring.ftl" as spring />
  <meta charset="utf-8" />
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
  <title><@spring.message code="reuser.title"/></title>
  <link rel="icon" href='<@spring.message code="logo_favicon"/>' />
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/register.css">
  <script language="JavaScript" type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/iCheck.min.js"></script>
  <script type="text/javascript" src="js/dropkick.min.js"></script>
</head>
<body>
<div class="loginDiv loginDivHgt">
    <div class="divBg"></div>
    <canvas id="canvas" class="canvas" width="495" height="900"></canvas>
    <div class="header">
      <div class="wtn">
        <a href="${request.contextPath}" class="logo"></a>
      </div>
    </div>
    <div class="loginCont loginContHgt">
      <div class="word">
        <div>
          <h3><@spring.message code="h3"/></h3>
          <p><@spring.message code="p"/></p>
        </div>
      </div>
      <div class="loginBox pos" id="registerBox">
          <span class="wxBox">
              <span class="wxDiv"><img src="images/zhifubao.png" /><font><@spring.message code="app" /></font></span>
              <span class="wxDiv"><img src="images/weixin.png" /><font><@spring.message code="wx" /></font></span>
          </span>
          <span class="registerFont"><font>企业用户注册</font></span>
          <p class="tipBox pos">
            <label class="passbox error" id="errorPlace" ></label>
          </p>
        <div class="loginStep">
          <form  method="post" id="addForm" onSubmit="return false">
            <div class="loginIn">
              <span class="icoBg"><span class="loginUser"></span></span>
              <input type="text" id="userName" name="userName" maxlength="30" placeholder="请输入用户名" />
            </div>
            <div class="loginIn">
              <span class="icoBg"><span class="loginPaw"></span></span>
              <input type="password" maxlength="28" id="password" name="password" placeholder="请输入登录密码" />
            </div>
            <div class="loginIn">
              <span class="icoBg"><span class="loginPaw"></span></span>
              <input type="password" maxlength="28" id="passwordConfirm" name="passwordConfirm" placeholder="再次输入登录密码" />
            </div>
            <div class="loginIn">
              <span class="icoBg"><span class="loginPhone"></span></span>
              <input type="text" id="email" name="email" maxlength="30" placeholder="请输入邮箱号码" class="inputWid fl" />
              <button class="loginBtn sendCode" id="countdowm_button" onclick="getValidateCode(1);return false;">发送验证码</button>
            </div>
            <div class="loginIn loginInMar">
              <span class="icoBg"><span class="loginYzm"></span></span>
              <input type="text" id="validateCode" name="validateCode" maxlength="28" placeholder="请输入邮箱验证码" />
            </div>
            <div class="rememberPwd">
              <span><input type="checkbox" id="agree" name="agree"  value="1" class="blue_check" checked="checked" /></span>
              <span>我已阅读并接受<a href="${request.contextPath}/agreement" target="_blank" class="commonHref">《服务条款》</a></span>
            </div>
            <div class="btnBox">
              <input type="hidden" name="service" value="">
              <input type="button" class="loginBtn" id="registerBtn" value="注册">
            </div>
            <#--${ msg }-->
          </form>
          <div class="lastBox lastBoxRig">
            我有账户，<a href="${request.contextPath}/login?redirect_url=${service}" class="commonHref">立即登录</a>
          </div>
        </div>
      </div>

      <!--注册成功开始-->
      <div class="loginBox successBox pos" style="padding:30px 35px 10px 35px;display:none;" id="successBox">
        <div class="loginStep center">
          <a href="javascript:void(0)" onclick="skip();" class="wrong_ico"></a>
          <span class="successIco"></span>
          <p class="successCont">&nbsp;&nbsp;&nbsp;注册成功！</p>
          <p class="succesSkip"><span id="totalSecond">5</span>秒之后跳转到登录页面，点击完成按钮立即登录！</p>
          <div class="btnBox">
            <input type="submit" onclick="skip();" class="loginBtn" value="完成">
          </div>
        </div>
      </div>
      <!--注册成功结束-->
    </div>
    <div class="foot">
      <p class="fPhone"><@spring.message code="phone"/></p>
      <#if copyright??>
        <p>${copyright}</p>
      </#if>
    </div>
</div>

<script type="text/javascript" src="js/jquery-validate/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/jquery-validate/localization/messages_cn.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/jquery-validate-extend.js"></script>
<script type="text/javascript" src="js/jquery.placeholder.min.js"></script>
<script type="text/javascript" src="js/md5.min.js"></script>
<script type="text/javascript" src="js/encrypt/crypto.custom.js"></script>
<script type="text/javascript" src="js/encrypt/encryptUtil.js"></script>
<script type="text/javascript" src="js/register.js"></script>
<script type="text/javascript" src="js/canvas.js"></script>
<script type="text/javascript" src="js/messagebox.js"></script>
<script type="text/javascript">
  var service = '${service}';
  if(service==null || service==''){
      service='${request.contextPath}';
  }

  function skip(){
    location.href = service;
  }

  $("#registerBtn").bind("click",function(){
      $("#registerBtn").attr("disabled", true);
      $("#registerBtn").css("background","#cbcbcb");
      //密码MD5加密
      //密码获取
      var secret=$("#validateCode").val();
      var authpwd=EncryptUtil.hmacSha256(md5($("#password").val()),"tgit");
      var condition={
          "authpwd":authpwd,
          "userName":$("#userName").val(),
          "email":$("#email").val(),
          "validCode":secret
      }
      $.ajax({
          url : "doReuser",
          data : JSON.stringify(condition),
          contentType: "application/json",
          dataType : 'json',
          type : "post",
          success : function(data) {
              if(data.code==200){
                  $("#successBox").show() ;
                  $("#registerBox").hide() ;
                  var i = $("#totalSecond").html();
                  var f = setInterval(function(){
                      $("#totalSecond").html(i--);
                      if(i<=0){
                          location.href = service;
                          clearInterval(f);
                      }
                  },1000);
              }else{
                  $("#errorPlace").html(data.msg);
              }
              $("#registerBtn").attr("disabled", false);
              $("#registerBtn").css("background","#ef3826");
          }
      });

  });

  $(function () {
    $('#email').placeholder();
    $('#password').placeholder();
    $('#passwordConfirm').placeholder();
    $('#company').placeholder();
    $('#email').placeholder();
    $('#validateCode').placeholder();

    var msessageMap = {}

    $("#addForm").validate({
      // 鼠标离开时校验
      onfocusout : function(element) {
        $(element).valid();
      },
      onkeyup:false,
      focusCleanup:true,
      success: function(label) {
        var $element = $("input[name="+label.attr("for")+"]");
        $($element).parent().removeClass("red_border");
      },
      errorPlacement: function(error, element) {
      },
      showErrors: function(errorMap, errorList) {
        msessageMap = $.extend(msessageMap, errorMap);
        $(errorList).each(function (i, v) {
          var element = this.element;
          if (element) {
            var elementName = element.name;
            $(element).parent().addClass("red_border");
            if (elementName == "picCodeInput" && $("#picCodeInput").val() != "") {
              changePic();
            }
          }
          if (i == 0) {
            $("#errorPlace").show();
            $("#errorPlace").html(msessageMap[ elementName ]);
          }
        });
        this.defaultShowErrors();
      },
      rules: {
        userName : {
          required : true,
          maxlength : 30,
          isTrueName:true,
          oneLN:true
        },
        password : {
          required : true,
          rangelength:[6,20]
        },
        passwordConfirm : {
          required : true,
          equalTo : "#password"
        },
        company :{
          required : true,
          maxlength : 50
        },
        email:{
          required: true,
          email:true
        },
        position : {
          required : true
        },
        validateCode : {
          required : true
        },
        agree : {
          required : true
        },
        picCodeInput : {
          required : true,
          length : 4
        }
      },
      messages : {
        userName: {
          required: "请输入用户名",
          oneLN: "至少有一个字母或数字",
          maxlength: "用户名最大长度是{0}",
          remote: "用户名已经存在"
        },
        password: {
          required: "请输入密码",
          rangelength: "密码长度在{0}-{1}之间"
        },
        passwordConfirm: {
          required: "请输入确认密码",
          equalTo: "两次输入密码不一致"
        },
        email: {
          required: "请填写邮箱号码",
          maxlength: "邮箱号最大长度是{0}",
          isTrueName: "请填写字母、数字、下划线、点、@",
          email: "必须输入正确格式的电子邮件"
        },
        company: {
          required: "请填写公司名称或者app产品名称",
          maxlength: "最大长度是{0}"
        },
        position: {
          required: "请选择岗位"
        },
        validateCode: {
          required: "请输入短信验证码"
        },
        agree: {
          required: "请勾选服务条款"
        },
        picCodeInput: {
          required: "请输入图片验证码",
          remote: "图片验证码错误"
        }
      }
    });
  });
  jQuery.validator.addMethod("isTrueName", function(value, element) {
    var reg = /[^\u4e00-\u9fa5_a-zA-Z0-9.@]/;
    return this.optional(element) || (!reg.test(value));
  }, "用户名请填写字母、数字、下划线、点、@");
  jQuery.validator.addMethod("oneLN", function(value, element) {
    var reg = /[a-zA-Z]+|\d+/;
    return this.optional(element) || (reg.test(value));
  }, "用户名至少包含一个字母或数字");
</script>

</body>
</html>
